<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css">
    <style>
        .layui-form-select dl{
            max-height: 170px;
        }
    </style>
</head>

<body class='labelAuto'>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">系统管理</a>
            <a>
                <cite>审批流程管理</cite>
            </a>
        </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body tableCardBody">
                    <table class="layui-table" id="lists" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type='text/html' id='toolbar'>
    <button class="layui-btn add" type="button" auth='addNode'>添加审批节点</button>
</script>
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type="text/javascript">
    layui.use(['form', 'layer', "table", "laydate"], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        // 异步数据加载
        var lists = table.render({
            elem: '#lists', //绑定DOM元素
            id: 'lists', //table的id
            title: '人员列表',
            height: 'full-110',
            contentType: "application/json; charset=utf-8",
            url: url + '/approval/approval/nodeLists', //数据接口地址
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            method: 'POST',
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data,
                    "msg": res.msg,
                };
            },
            where: {
                start: 0,
                draw: 1,
                token: getToken()
            },
            toolbar: '#toolbar',
            defaultToolbar: ['filter'],
            page: false, //开启分页
            limit: 10, //默认每页记录条数
            limits: [10, 20, 50], //每页记录条数可选数量
            cols: [
                [ //表头
                    {field: '', title: '编号', type: 'numbers', width: '8%'},
                    {
                        field: 'adminName', title: '参与审批的角色', width: "55%", templet(d) {
                            let html = '';
                            for (r in d.roleList ) {
                                html += `<span style="margin:0 4px;">${d.roleList[r].roleName}</span>|`
                            }
                            return html
                        }
                    },
                    {field: 'process', title: '审批节点次序', width: "10%"},
                    {
                        field: '', title: '操作', width: "25%", templet(d) {
                            return `
                            <button class='layui-btn' lay-event="addRole" data-id=${d.id}>添加审批角色</button>
                            <button class='layui-btn' lay-event="roleList" data-id=${d.id}>审批角色</button>
                            <button class='layui-btn layui-btn-danger' lay-event="delete" auth='delNode' data-id=${d.id}>删除</button>
                        `
                        }
                    }
                ]
            ],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 100000, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            done: function () {
                permission();
            }
        });
        table.on('tool(test)', function (data) {
            if(data.event=='addRole'){
                let nodeId = data.data.id;
                let roleOption = '<option value="">请选择角色</option>'
                $.ajax({
                    url: url + "/auth/role/selectLists",
                    type: "POST",
                    async:false,
                    data: {
                        token: getToken()
                    },
                    success: function (r) {
                        if (r.code == 100000) {
                            for(let i=0;i<r.data.length;i++){
                                roleOption+= `<option value="${r.data[i].id}">${r.data[i].name}</option>`
                            }
                        }
                    }
                })
                layer.open({
                    type: 1,
                    title: "添加审批人",
                    area: ['40%', '50%'],
                    content: `
                    <form class='layui-form layerOpen' lay-filter="roleForm">
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>添加角色</label>
                                <div class='layui-input-block' >
                                    <select name="roleId" id="roleId">${roleOption}</select>
                                </div>
                            </div>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>审批权限</label>
                                <div class='layui-input-block' >
                                    <input type="checkbox" name="workmanAssignment" title="施工量价" lay-skin="primary" value="1">
                                    <input type="checkbox" name="workmanAccounts" title="工人分账" lay-skin="primary" value="1">
                                    <input type="checkbox" name="handymanAccounts" title="杂工分账" lay-skin="primary" value="1">
                                    <input type="checkbox" name="attendance" title="工人考勤" lay-skin="primary" value="1">
                                    <input type="checkbox" name="loan" title="工人借款" lay-skin="primary" value="1">
                                    <input type="checkbox" name="living" title="生活费用" lay-skin="primary" value="1">
                                    <input type="checkbox" name="supplier" title="供应商订单" lay-skin="primary" value="1">
                                </div>
                            </div>
                        </div>
                    </form>
                `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    success: function () {
                        form.render();
                    },
                    yes: function (index, layero) {
                        let roleId = $('select[name=roleId]').val();
                        let formData = form.val('roleForm');
                        $.ajax({
                            url: url + "/approval/approval/addNodeRole",
                            type: "POST",
                            data: {
                                nodeId: nodeId,
                                roleId: roleId,
                                workmanAssignment:formData.workmanAssignment?1:0,
                                workmanAccounts:formData.workmanAccounts?1:0,
                                handymanAccounts:formData.handymanAccounts?1:0,
                                attendance:formData.attendance?1:0,
                                loan:formData.loan?1:0,
                                living:formData.living?1:0,
                                supplier:formData.supplier?1:0,
                                token: getToken()
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('添加审批人', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('添加审批人', r);
                                }
                            }
                        })
                    }
                })
            }else if (data.event == 'roleList'){
                let nodeId = data.data.id;
                let roleList = data.data.roleList;
                let tbody = ''
                for(let i=0;i<roleList.length;i++){
                    tbody+= `<tr>
                                <td>${i+1}</td>
                                <td>${roleList[i].roleName}</td>
                                <td>${approval(roleList[i])}</td>
                                <td><button type="button" class="layui-btn layui-btn-danger deleteRole" data-roleid="${roleList[i].roleId}">删除</button></td>
                             </tr>`
                }
                layer.open({
                    type: 0,
                    title: "审批",
                    area: ['70%', '60%'],
                    content: `<table class="layui-table">
                                <thead>
                                    <tr>
                                        <th style="width:10%">编号</th>
                                        <th style="width:15%">角色名称</th>
                                        <th style="width:50%">账目提交权限</th>
                                        <th style="width:10%">操作</th>
                                    </tr>
                                </thead>
                                <tbody>${tbody}</tbody>
                              </table>`,
                    btn: ['取消'],
                    skin: 'my-skin',
                    success: function () {

                    },
                })
                $('body').on('click','.deleteRole',function(){
                    let roleId = $(this).data('roleid');
                    $.ajax({
                        url: url + "/approval/approval/deleteRole",
                        type: "POST",
                        async:false,
                        data: {
                            nodeId: nodeId,
                            roleId: roleId,
                            token: getToken()
                        },
                        success: function (r) {
                            if (r.code == 100000) {
                                tips('审批', r);
                                setTimeout(function () {
                                    layer.closeAll();
                                    table.reload('lists');
                                }, 2000)
                            } else {
                                tips('审批', r);
                            }
                        }
                    })
                })
            }else if (data.event == 'delete') {
                layer.open({
                    type: 0,
                    title: "删除",
                    area: ['40%', '40%'],
                    content: `请确认是否删除此节点`,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    yes: function (index, layero) {
                        $.ajax({
                            url: url + '/approval/approval/deleteNode',
                            type: "post",
                            data: {
                                id: data.data.id,
                                status: data.data.status == 0 ? 1 : 0,
                                token: getToken()
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    table.reload('lists');
                                } else {
                                    tips('修改审批流程状态', r);
                                }
                            }
                        })
                    }
                })

            }
        })
        $('body').on('click', 'button.add', function () {
            layer.open({
                type: 1,
                title: "添加审批节点",
                area: ['40%', '40%'],
                content: `
                    <form class='layui-form layerOpen'>
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>审批流程</label>
                                <div class='layui-input-block'>
                                    <input type='number' placeholder='请输入节点序号' name='process' autocomplete="off" class='layui-input' min="0">
                                </div>
                            </div>
                        </div>
                    </form>
                `,
                btn: ['确认', '取消'],
                skin: 'my-skin',
                success: function () {
                    form.render();
                },
                yes: function (index, layero) {
                    var adminId = $('input[name=search]').data('id');
                    var process = $('input[name=process]').val();
                    $.ajax({
                        url: url + "/approval/approval/addNode",
                        type: "POST",
                        data: {
                            adminId: adminId,
                            process: process,
                            token: getToken()
                        },
                        success: function (r) {
                            if (r.code == 100000) {
                                tips('添加审批节点', r);
                                setTimeout(function () {
                                    layer.closeAll();
                                    table.reload('lists');
                                }, 2000)
                            } else {
                                tips('添加审批节点', r);
                            }
                        }
                    })
                }
            })
        });

        function approval(data){
            let html = '';
            if (data.workmanAssignment == 0){
                html+=`<span style="color:#b2b2b2;margin-left: 7px;">施工量价</span>`
            }else{
                html+=`<span style="margin-left: 7px;"><b>施工量价</b></span>`
            }
            if (data.workmanAccounts == 0){
                html+=`<span style="color:#b2b2b2;margin-left: 7px;">工人分账</span>`
            }else{
                html+=`<span style="margin-left: 7px;"><b>工人分账</b></span>`
            }
            if (data.handymanAccounts == 0){
                html+=`<span style="color:#b2b2b2;margin-left: 7px;">杂工分账</span>`
            }else{
                html+=`<span style="margin-left: 7px;"><b>杂工分账</b></span>`
            }
            if (data.attendance == 0){
                html+=`<span style="color:#b2b2b2;margin-left: 7px;">工人考勤</span>`
            }else{
                html+=`<span style="margin-left: 7px;"><b>工人考勤</b></span>`
            }
            if (data.loan == 0){
                html+=`<span style="color:#b2b2b2;margin-left: 7px;">工人借款</span>`
            }else{
                html+=`<span style="margin-left: 7px;"><b>工人借款</b></span>`
            }
            if (data.living == 0){
                html+=`<span style="color:#b2b2b2;margin-left: 7px;">生活费用</span>`
            }else{
                html+=`<span style="margin-left: 7px;"><b>生活费用</b></span>`
            }
            if (data.supplier == 0){
                html+=`<span style="color:#b2b2b2;margin-left: 7px;">供应商订单</span>`
            }else{
                html+=`<span style="margin-left: 7px;"><b>供应商订单</b></span>`
            }
            return html;
        }
    });
</script>

</html>